<template>
  <el-dialog v-model="innerVisible" width="80%" title="选择学生" append-to-body>
    <div>
      <el-row>
        <el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
          <el-form-item label="姓名" prop="name">
            <el-input placeholder="请输入姓名" v-model="queryForm.name" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input placeholder="请输入手机号" v-model="queryForm.phone" maxlength="11" />
          </el-form-item>
          <el-form-item>
            <el-button icon="search" type="primary" @click="getDataList">
              查 询
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">重 置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table :data="dataList" v-loading="loading" border @selection-change="selectionChangHandle">
        <el-table-column type="selection" width="40" align="center" v-if="ismultiple" />
        <el-table-column type="index" label="#" width="100" />
        <el-table-column prop="name" label="姓名" show-overflow-tooltip />
        <el-table-column prop="phone" label="手机号" show-overflow-tooltip />
        <el-table-column prop="admissionTeacherName" label="招生老师" show-overflow-tooltip />
        <el-table-column prop="receptionTeacher" label="接待老师" show-overflow-tooltip />
        <el-table-column label="操作" width="150" v-if="!ismultiple">
          <template #default="scope">
            <el-button text type="primary" @click="radioUser(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer v-if="ismultiple">
      <span class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts" name="selectUser">
import { ref } from 'vue';
import { fetchList } from "/@/api/admin/student";
import { addStudent, fetchListClass, deluser } from '/@/api/admin/classStudent'
const props = defineProps({
  ismultiple: Boolean,
  classId: Number
});
const innerVisible = ref(false)
const loading = ref(false)
const dataList = ref([])
const multiple = ref(true)
// 搜索变量
const queryRef = ref()
// 多选变量
const selectObjs = ref([]) as any
const queryForm = ref({
  name: '',
  phone: '',
  pages: 1,
  size: 99999,
  classId: props.classId,
  inClass: 0
})
const emit = defineEmits(['selectUserFun']);
// 多选事件
const selectionChangHandle = (objs: { id: string, name: string }[]) => {
  selectObjs.value = objs.map(({ id, name }) => ({ id, name }));
  multiple.value = !objs.length;
  console.log(selectObjs.value)
};
const showMode = () => {
  innerVisible.value = true
  if (props.classId) {
    getclassUser()
  } else {
    getUser()
  }
}
const getclassUser = () => {
  fetchListClass(queryForm.value).then((res: any) => {
    console.log(res);
    if (res.code == 0) {
      loading.value = false
      dataList.value = res.data
    }
  })
}
const getUser = () => {
  fetchList(queryForm.value).then((res: any) => {
    console.log(res);
    if (res.code == 0) {
      loading.value = false
      dataList.value = res.data.records
    }
  })
}
const getDataList = () => {
  if (props.classId) {
    getclassUser()
  } else {
    getUser()
  }

}
// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  getDataList()
}
const radioUser = (data) => {
  emit('selectUserFun', [data])
  innerVisible.value = false
}
const onSubmit = () => {
  emit('selectUserFun', selectObjs.value)
  innerVisible.value = false


}
// 暴露变量
defineExpose({
  showMode
});
</script>